<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import ip from '@/utils/baseURL.js'
import { Monitor, Aim, Connection, DataLine } from '@element-plus/icons-vue'

// 定义数据结构
const briefInfo = ref('')
const goals = ref([])
const contactInfo = ref([])

// 获取数据的方法
const fetchData = async () => {
  try {
    const response = await axios.get(`${ip}/inter/studio/getEssInfo`)
    if (response.data.code === 200) {
      const data = response.data.data

      // 处理简介信息
      const briInfo = data.find(item => item.type === 'bri_info')
      briefInfo.value = briInfo ? briInfo.content : ''

      // 处理发展目标
      goals.value = data
        .filter(item => item.type === 'goal')
        .map(item => ({
          icon: getIconByTitle(item.remark),
          title: item.remark,
          description: item.content
        }))

      // 处理联系方式
      contactInfo.value = data.filter(item => item.type === 'contact')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

// 根据标题返回对应的图标
const getIconByTitle = (title) => {
  const iconMap = {
    '科技创新': 'Aim',
    '产学研结合': 'Connection',
    '人才培养': 'DataLine'
  }
  return iconMap[title] || 'Monitor'
}

onMounted(() => {
  fetchData()
})
</script>

<template>
    <div class="about-container">
        <div class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>关于我们</h1>
            </div>

            <!-- 中心简介 -->
            <div class="section">
                <div class="section-header">
                    <h2>中心简介</h2>
                </div>
                <div class="content-box">
                    <div v-html="briefInfo.split('\n\n').map(p => `<p>${p}</p>`).join('')"></div>
                </div>
            </div>

            <!-- 发展目标 -->
            <div class="section">
                <div class="section-header">
                    <h2>发展目标</h2>
                </div>
                <div class="content-box">
                    <div class="goals">
                        <div class="goal-item" v-for="(goal, index) in goals" :key="index">
                            <div class="goal-icon">
                                <el-icon :size="30" color="#86B943">
                                    <component :is="goal.icon" />
                                </el-icon>
                            </div>
                            <div class="goal-content">
                                <h3>{{ goal.title }}</h3>
                                <p>{{ goal.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 联系我们 -->
            <div class="section">
                <div class="section-header">
                    <h2>联系我们</h2>
                </div>
                <div class="content-box">
                    <div class="contact-info">
                        <p v-for="item in contactInfo" :key="item.id">
                            <strong>{{ item.remark }}：</strong>{{ item.content }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.about-container {
    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .page-header {
        margin-bottom: 40px;
        text-align: center;

        h1 {
            font-size: 36px;
            color: #333;
            margin: 0;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 4px;
                background-color: #86B943;
            }
        }
    }

    .section {
        margin-bottom: 50px;

        .section-header {
            margin-bottom: 30px;
            
            h2 {
                font-size: 24px;
                color: #333;
                margin: 0;
                position: relative;
                padding-left: 15px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 20px;
                    background-color: #86B943;
                }
            }
        }

        .content-box {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

            p {
                color: #666;
                line-height: 1.8;
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .research-areas {
        .research-item {
            display: flex;
            margin-bottom: 40px;
            
            &:last-child {
                margin-bottom: 0;
            }

            .research-icon {
                flex-shrink: 0;
                margin-right: 20px;
                padding-top: 5px;
            }

            .research-content {
                h3 {
                    color: #333;
                    margin: 0 0 10px 0;
                }

                p {
                    margin-bottom: 15px;
                }

                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    li {
                        position: relative;
                        padding-left: 20px;
                        margin-bottom: 8px;
                        color: #666;

                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 8px;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background-color: #86B943;
                        }
                    }
                }
            }
        }
    }

    .goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定3列 */
  gap: 30px;
  overflow-x: auto; /* 允许水平滚动 */
  padding: 0 10px; /* 防止滚动时内容被裁剪 */
  
  .goal-item {
    min-width: 320px; /* 每一列的最小宽度 */
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s;
    
    .goal-content {
      h3 {
        font-size: 18px;
        margin: 15px 0;
        white-space: nowrap; /* 标题不换行 */
      }
      p {
        font-size: 14px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 限制最多3行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

/* 优化响应式 */
@media (max-width: 1200px) {
  .goals {
    gap: 20px;
    .goal-item {
      min-width: 280px;
    }
  }
}

    .contact-info {
        p {
            margin-bottom: 10px;
            
            strong {
                color: #333;
                margin-right: 10px;
            }
        }
    }
}

// 响应式布局
@media (max-width: 768px) {
    // .goals {
    //     grid-template-columns: 1fr !important;
    //     gap: 20px !important;
    // }

    .research-item {
        flex-direction: column;

        .research-icon {
            margin-bottom: 15px;
        }
    }

    .page-header {
        h1 {
            font-size: 28px !important;
        }
    }
}
</style>